<script setup>
import {ref} from 'vue';
import LoginSimple from "@/zdpui/components/form/LoginSimple.vue";
import Api from "@/zdpui/api/api.js"
import {useUserInfo} from "@/comp/auth_user.js";
import {useRouter} from "vue-router";

const {setToken, setUserId, setUsername} = useUserInfo()
const router = useRouter()
const form = ref({
  username: '',
  password: '',
});

const api = new Api("http://127.0.0.1:8000")
const error = ref('');

const handleLogin = ({username, password}) => {
  const body = {username, password}
  console.log("body", body)
  api.post("/user/login", body)
      .then(res => {
        // 存储用户登录信息
        console.log(res)
        if (res.code !== 10000){
          error.value = res.msg;
          return
        }
        const {id, username, token} = res.data;
        console.log("id", id)
        console.log("username", username)
        console.log("token", token)
        setUserId(id)
        setUsername(username)
        setToken(token)

        // 跳转到首页
        router.push("/")
      })
  if (username === 'admin' && password === '123456') {
    error.value = '';
    alert('登录成功！');
    // 这里可以添加跳转到其他页面的逻辑
  } else {
    error.value = '用户名或密码错误';
  }
};
</script>

<template>
  <div class="login-page">
    <h1>欢迎登录本系统</h1>
    <LoginSimple
        v-model:username="form.username"
        v-model:password="form.password"
        @login="handleLogin"
    />
    <p v-if="error" class="error-message">{{ error }}</p>
  </div>
</template>


<style scoped>
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  font-family: 'Arial', sans-serif;
}

h1 {
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 24px;
}

.error-message {
  margin-top: 15px;
  color: #e74c3c;
  font-size: 14px;
}
</style>